<template>
	<view>
		<view>
			<!-- <scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
						{{tabs[index]}}
					</view>
				</view>
			</scroll-view> -->
			<u-list v-if="indexList.length>0" @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in indexList" :key="index">
					<view class="padding-sm bg-white " @click="gotoinfo(item)">
						<view class="flex align-center justify-between">
							<view class="text-bold text-black">订单号：{{item.order_code}}</view>
							<view class="cu-tag" v-if="item.state==-1">已取消</view>
							<view class="cu-tag" v-else-if="item.state==0&&item.pay_state==0"
								style="background-color: #f56c6c;color: #fff;">待支付</view>
							<view class="cu-tag bg-orange" v-else-if="item.pay_state==1&&item.state==0">待发货</view>
							<view class="cu-tag bg-orange" v-else-if="item.pay_state==1&&item.state==2">已发货</view>
							<view class="cu-tag bg-green" v-else-if="item.pay_state==1&&item.state==3">已收货</view>
							<view class="cu-tag bg-green" v-else-if="item.pay_state==1&&item.state==1">已完成</view>
						</view>
						<view class="margin-tb-sm flex align-center justify-between" v-for="(goods,idx) in item.goodslist" :key="idx">
							<view class="flex align-center">
								<u-image :src="goods.goods_img" width="60" height="60"></u-image>
								<view class="margin-left-sm">
									<view class="text-black"><text class="text-bold padding-right-xs">{{goods.goods_name}}</text>{{goods.sku_name}}</view>
									<view class="text-sm margin-top-sm">单价：{{goods.unit_price}}</view>
								</view>
							</view>
							<view>
								<view class="text-price text-bold text-black">{{goods.unit_price}}</view>
								<view class="margin-top-sm">×{{goods.count}}</view>
							</view>
						</view>
						<view class="flex align-center justify-between padding-tb-xs">
							<view class="text-black">
								下单时间：{{item.create_time}}
							</view>
							<!-- <view class="text-black">
								运费：{{item.freight}}
							</view> -->
						</view>
						<view class="flex align-center justify-between">
							<!-- <view class="text-black">
								下单时间：{{item.create_time}}
							</view> -->
							<view class="text-bold text-black text-lg">
								总金额：￥{{item.total_price}}
							</view>
							<view class="text-bold text-black text-lg">
								预估佣金收入:￥{{item.promoter_money}}
							</view>
						</view>
			
					</view>
					<view class="flex align-center bg-white justify-end padding-bottom-sm margin-bottom">
						<!-- 							<view  v-if="item.state!=-1&&item.pay_state==0">
							<u-button size="mini" type="info" plain text="取消"></u-button>
						</view> -->
						<view class="margin-lr-xs" v-if="item.state!=-1&&item.pay_state==0">
							<u-button size="mini" color="#f56c6c" type="success" text="去支付"
								@click="gotoinfo(item.id)"></u-button>
						</view>
						<view class="margin-lr-xs" v-if="item.state==2&&item.pay_state==1">
							<u-button size="mini" color="orange" type="success" text="确认收货"
								@click="gotoinfo(item)"></u-button>
						</view>
						<!-- <view class="margin-lr-xs" v-if="item.state==1&&item.pay_state==1">
							<u-button size="mini" type="info" text="申请退款"
								@click="confirm(item)"></u-button>
						</view> -->
					</view>
				</u-list-item>
			</u-list>
			<view v-else class="margin-top-xl">
				<u-empty 
				        mode="order"
				        text="订单为空"
				>
				</u-empty>
				<view class="text-center margin-top-lg">
					<button class="cu-btn round bg-red padding-lr-xl" @click="goto">随便逛逛</button>
				</view>
				
			</view>
			
		</view>
		<u-tabbar value="order" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" activeColor="#303133">
			<u-tabbar-item name="mall" text="云店首页" icon="home" @click="click('mall')"></u-tabbar-item>
			<u-tabbar-item name="order" text="订单" icon="grid-fill" ></u-tabbar-item>
			<u-tabbar-item name="my" text="我的" icon="account" @click="click('my')"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				tabs:[
					"全部",
					"待付款",
					"待发货",
					"待收货",
					"已完成"
				],
				indexList: [],
				
				mallcode:"",
				p:"",
				themecolor:"red",
				orderList:[[],[],[],[]],
				page:1,
				pagesize:20,
				pages:1,
			}
		},
		onLoad(option) {
			this.mallcode=option.c;
			this.p=option.p
		},
		onShow() {
			this.page=1
			this.getData()
		},
		onReachBottom() {
			this.getData()
		},
		methods: {
			gotoinfo(item){
				console.log("item",item.id)
				// uni.navigateTo({
				// 	url:"/pages/order/info?id="+item.id+"&c="+this.mallcode+"&p"+this.p
				// })
			},
			getData(){
				console.log("----",this.page,this.pages)
				if(this.page>this.pages){
					return 
				}
				var type=this.TabCur-1
				this.AXIOS.Request(true, 'POST', {
					url: "/api/app/getfxorder",
					data:{
						page:this.page,
						_pagesize:this.pagesize,
						type:type
					}
				}, (res) => {
					var rst=res.data;
					if(rst.code==100){
						var rows=rst.list;
						if(this.page==1){
							this.indexList=rows
						}else{
							rows.forEach(item=>{
								this.indexList.push(item)
							})
						}
						this.pages=rst.pages;
						if (this.page < this.pages) {
							this.page += 1
						}
		
					}
				})
			},
			click(v){
				if(v=="my"){
					uni.redirectTo({
						url:"/pages/my/my?c="+this.mallcode+"&p="+this.p
					})
				}
				if(v=="mall"){
					uni.redirectTo({
						url:"/pages/index/mall?c="+this.mallcode+"&p="+this.p
					})
				}
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.indexList=[]
				this.page=1;
				this.pages=1;
				this.getData()
			},
			goto(){
				uni.redirectTo({
					url:"/pages/index/mall?c="+this.mallcode+"&p="+this.p
				})
			},
			scrolltolower(){
				
			}
		}
	}
</script>

<style>

</style>
